<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            position: relative;
        }

        header .head {
            width: 600px;
            margin: 0 auto;
            position: absolute;
            left: 430px;
            top: 20px;
        }

        header .head ul {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        header .head ul li {
            /* border: 1px solid black; */
            /* width: 10%; */
            text-align: center;
            list-style: none;
            color: gray;
            cursor: pointer;
        }

        header .head ul li:hover {
            color: red;

        }

        header img {
            width: 100%;
            height: 100%;
        }

        header h2 {
            position: absolute;
            left: 60px;
            top: -10px;
            color: black;
            font-size: 35px;
        }

        .list {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translate(-50%, 0);
        }

        .list ul {
            display: flex;
        }

        .list ul li {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            list-style: none;
            margin: 0 15px;
            cursor: pointer;
        }

        nav {
            width: 1200px;
            margin: 0 auto;
            /* border: 1px solid black; */
        }

        nav .top {
            /* margin-top: 30px; */
            line-height: 60px;
            display: flex;
            justify-content: space-between;
        }

        nav .top .p1 {
            font-size: 40px;
        }

        nav .top .p2 {
            padding-top: 30px;
            text-decoration: underline;
            cursor: pointer;
        }

        nav .center {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        nav .center .left {
            width: 60%;
            margin: 30px 0;
            /* overflow: hidden; */
        }

        nav .center .left .img {
            width: 100%;
            height: 550px;
            overflow: hidden;
        }

        nav .center .left img {
            width: 100%;
            height: 550px;
            cursor: pointer;
            transform: scale(1.0);
            transition: all 0.8s;
        }

        nav .center .left img:hover {
            transform: scale(1.1);
        }

        nav .center .left .s1 {
            box-sizing: border-box;
            /* margin-top: 20px; */
            font-size: 20px;
            font-weight: 500;
        }

        nav .center .left .sn {
            margin-bottom: 30px;
        }

        nav .center .left .s2 {
            font-size: 12px;
            color: chartreuse;
            padding-left: 10px;
        }

        nav .center .left .p1 {
            font-weight: 700;
            padding-bottom: 10px;
        }

        nav .center .left .s3 {
            /* width: 100px; */
            /* line-height: 40px; */
            background-color: #000;
            padding: 15px 30px;
            /* border: 1px solid black; */
            color: white;
            text-align: center;
            cursor: pointer;
        }

        nav .center .left .s4 {
            text-decoration: underline;
            color: gray;
            padding-left: 40px;
            font-size: 14px;
            cursor: pointer;
        }

        section {
            padding-bottom: 100px;
            margin-top: 100px;
            width: 100%;
            /* height: 600px; */
            background-color: #eee;
        }

        section .w {
            width: 1200px;
            margin: 0 auto;
        }

        section .w .top {
            /* margin-top: 30px; */
            line-height: 60px;
            display: flex;
            justify-content: space-between;
        }

        section .w .top .p1 {
            font-size: 40px;
        }

        section .w .top .p2 {
            padding-top: 30px;
            text-decoration: underline;
            cursor: pointer;
        }

        section .w .center {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        section .w .center .left {
            width: 60%;
            margin: 30px 0;
        }

        section .w .center .left .img {
            width: 100%;
            height: 550px;
            overflow: hidden;
        }

        section .w .center .left img {
            width: 100%;
            height: 550px;
            cursor: pointer;
            transform: scale(1.0);
        }

        section .w .center .left img:hover {
            transform: scale(1.1);
            transition: all 0.8s;
        }

        section .w .center .left .s1 {
            box-sizing: border-box;
            /* margin-top: 20px; */
            font-size: 20px;
            font-weight: 500;
        }

        section .w .center .left .sn {
            margin-bottom: 30px;
        }

        section .w .center .left .s2 {
            font-size: 12px;
            color: chartreuse;
            padding-left: 10px;
        }

        section .w .center .left .p1 {
            font-weight: 700;
            padding-bottom: 10px;
        }

        section .w .center .left .s3 {
            /* width: 100px; */
            /* line-height: 40px; */
            background-color: #000;
            padding: 15px 30px;
            /* border: 1px solid black; */
            color: white;
            text-align: center;
            cursor: pointer;
        }

        section .w .center .left .s4 {
            text-decoration: underline;
            color: gray;
            padding-left: 40px;
            font-size: 14px;
            cursor: pointer;
        }

        .box {
            width: 100%;
            /* height: 300px; */
            background-color: hsl(194, 65%, 92%);
            padding: 100px 0;
        }

        .box .w {
            width: 1200px;
            margin: 0 auto;
        }

        .box .w .top {
            height: 60px;
            line-height: 60px;
        }

        .box .w .top .p1 {
            font-size: 35px;
            float: left;

        }

        .box .w .top .p2 {
            float: right;
        }

        .box .w .top .p2 .s1 {
            border: 2px solid black;
            padding: 5px;
            border-radius: 50%;
            cursor: pointer;
            background-color: transparent;
            font-size: 18px;
            font-family: 700;

        }

        .box .w .top .p2 .ss {
            padding: 0 8px;
        }

        .box .w .center ul {
            display: flex;
            justify-content: space-between;
        }

        .box .w .center ul li {
            width: 32%;
            list-style: none;
        }

        .box .w .center ul li .img {
            width: 100%;
            height: 250px;
            overflow: hidden;
        }

        .box .w .center ul li .img img {
            width: 100%;
            height: 100%;
            cursor: pointer;
            transform: scale(1.0);
        }

        .box .w .center ul li .img img:hover {
            /* scale 控制图片大小 */
            transform: scale(1.1);
            /* 过渡动画 */
            transition: all 0.8s;
        }

        .box .w .center ul li .vv {
            cursor: pointer;
            height: 250px;
        }

        .box .w .center ul li .p1 {
            font-weight: 700;
            font-size: 20px;
        }

        .box .w .center ul li .p2 {
            font-size: 14px;
            font-family: 'Courier New', Courier, monospace;
        }

        .box .w .center ul li .p3 {
            font-family: 'Courier New', Courier, monospace;
            text-decoration: underline;
        }

        footer {
            padding: 100px 0;
            background-color: #eee;
        }

        footer .w {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
        }

        footer .w .foot {
            width: 18%;
            /* border: 1px solid black; */
        }
        footer .w .foot ul li {
            list-style: none;
            color: gray;
            font-size: 12px;
            padding: 10px 0;
            cursor: pointer;
        }

        footer .w .foot ul .ll {
            font-weight: 700;
            color: black;
            font-size: 18px;
        }
        .fh{
            background-color: rgb(243, 233, 233);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            position: fixed;
            bottom: 20px;
            right: 30px;
            display: none;
            z-index: 999;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <header>
        <h2 class="hh">OPPO</h2>
        <div class="head">
            <ul>
                <li>手机</li>
                <li>智能硬件</li>
                <li>欢太商城</li>
                <li>关于OPPO</li>
                <li>ColorOS</li>
                <li>服务</li>
                <li>企业服务</li>
            </ul>

        </div>
        <img src="./imgs/1.jpg" alt="" class="ban">
        <div class="list">
            <ul>
                <li style="background-color: gray;" onclick="qh(0)"></li>
                <li onclick="qh(1)"></li>
                <li onclick="qh(2)"></li>
            </ul>
        </div>
    </header>
    <nav>
        <div class="top">
            <p class="p1">更多新品</p>
            <p class="p2">查看全部手机</p>
        </div>
        <div class="center">
            <div class="left">
                <div class="img"><img src="./imgs/Reno6 pro plus-middlebanner-blue-1600x1068-v2-pc.jpg" alt=""></div>
                <span class="s1">Reno6 Pro+</span><span class="s2">新品</span>
                <p class="sn">索尼 IMX766 传感器,晓龙870芯片</p>
                <p class="p1">3999元起</p>
                <span class="s3">了解更多</span><span class="s4">立即购买</span>
            </div>
            <div class="left" style="width: 30%;">
                <div class="img"><img src="./imgs/Reno6-middlebanner-black-1340x1786-v3-pc.jpg" alt=""></div>
                <span class="s1">Reno6</span><span class="s2">新品</span>
                <p class="sn">焕采光斑人像视频，65W 超级闪充</p>
                <p class="p1">2799 元起</p>
                <span class="s3">了解更多</span><span class="s4">立即购买</span>
            </div>
            <!-- <br> -->
            <div class="left" style="width: 30%;">
                <div class="img"><img src="./imgs/Reno6-middlebanner-black-1340x1786-v3-pc.jpg" alt=""></div>
                <span class="s1">OPPO K9</span><span class="s2">新品</span>
                <p class="sn">充电 5 分钟，开黑 2 小时</p>
                <span class="s3">了解更多</span><span class="s4">立即购买</span>
            </div>
            <div class="left">
                <div class="img"><img src="./imgs\Find X3-middlebanner-moka-1600x1068-v2-pc.jpg" alt=""></div>
                <span class="s1">Find X3 系列</span><span class="s2">新品</span>
                <p class="sn">宇宙摩卡，浪漫上市</p>
                <span class="s3">了解更多</span><span class="s4">立即购买</span>
            </div>
        </div>
    </nav>
    <section>
        <div class="w">
            <div class="top">
                <p class="p1">智能软件</p>
                <p class="p2">查看全部智能硬件</p>
            </div>
            <div class="center">
                <div class="left">
                    <div class="img"><img src="./imgs\TV K9-middlebanner-black-1600x1068-v2-pc.jpg" alt=""></div>
                    <span class="s1">OPPO 智能电视 K9</span><span class="s2">新品</span>
                    <p class="sn">十亿色彩，十分出彩</p>
                    <span class="s3">了解更多</span><span class="s4">立即购买</span>
                </div>
                <div class="left" style="width: 30%;">
                    <div class="img"> <img src="./imgs\Enco free2-middlebanner-white-1340x1786-v3-pc.jpg" alt=""></div>
                    <span class="s1">OPPO Enco Free2</span><span class="s2">新品</span>
                    <p class="sn">个性化降噪，每一刻都美妙</p>
                    <span class="s3">了解更多</span><span class="s4">立即购买</span>
                </div>
            </div>
        </div>
    </section>
    <div class="box">
        <div class="w">
            <div class="top">
                <div class="p1">探索 OPPO</div>
                <div class="p2">
                    <button class="s1 zz" onclick="zuo()" disabled='true'>←</button>
                    <span class="ss"></span>
                    <button class="s1 yy" onclick="you()">→</button>
                </div>
            </div>
            <div class="center">
                <ul>
                    <li>
                        <div class="img"> <img src="./imgs\Reno6-universe-v3-pc.jpg" alt="" onmouseover="ru()"
                                class="ii">
                            <video src="./videos/kv-video-cover-1-v2.mp4" width="100%" muted autoplay loop
                                style="display: none;" class="vv" onmouseout="chu()"></video>
                        </div>

                        <p class="p1">探索 Reno 系列</p>
                        <p class="p2">在我眼里你会发光</p>
                        <p class="p3">了解更多</p>
                    </li>
                    <li>
                        <div class="img"><img src="./imgs\discovery-01.jpg" alt=""></div>
                        <p class="p1">线下体验店</p>
                        <p class="p2">查找附近 OPPO 体验店，了解更多会员权益</p>
                        <p class="p3">了解更多</p>
                    </li>
                    <li>
                        <div class="img"><img src="./imgs\discovery-02.jpg" alt=""></div>
                        <p class="p1">O学堂</p>
                        <p class="p2">立即报名摄影课程，一起发现生活中的美</p>
                        <p class="p3">了解更多</p>
                    </li>
                    <li style="display: none;">
                        <div class="img"> <img src="./imgs\discovery-03.jpg" alt=""></div>
                        <p class="p1">会员日</p>
                        <p class="p2">参与每月 16-18 日会员日活动</p>
                        <p class="p3">了解更多</p>
                    </li>
                    <li style="display: none;">
                        <div class="img"><img src="./imgs\discovery-04.jpg" alt=""></div>
                        <p class="p1">万物互融</p>
                        <p class="p2">OPPO 随享，美好生活随时分享</p>
                        <p class="p3">了解更多</p>
                    </li>
                    <li style="display: none;">
                        <div class="img"><img src="./imgs\discovery-05.jpg" alt=""></div>
                        <p class="p1">留住消失的色彩</p>
                        <p class="p2">与国家地理深度合作，致力保护濒危物种</p>
                        <p class="p3">了解更多</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <div class="w">
            <div class="foot">
                <ul>
                    <li class="ll">推荐产品</li>
                    <li>Find X3 系列</li>
                    <li>Reno6 系列</li>
                    <li>Ace2</li>
                    <li>A95</li>
                    <li>K9</li>
                    <li>Enco Air</li>
                    <li>查看全部手机</li>
                    <li>查看全部智能硬件</li>
                </ul>
            </div>
            <div class="foot">
                <ul>
                    <li class="ll">购买渠道</li>
                    <li>线下体验店</li>
                    <li>欢太商城</li>
                    <li>官方授权网店</li>
                    <li>欢太商城客户端下载</li>
                </ul>
            </div>
            <div class="foot">
                <ul>
                    <li class="ll">探索精彩 OPPO</li>
                    <li>关于 OPPO</li>
                    <li>新闻中心</li>
                    <li>OPPO 社区</li>
                    <li>加入我们</li>
                    <li>知识产权</li>
                    <li>可持续发展报告</li>
                    <li>安全隐私</li>
                </ul>
            </div>
            <div class="foot">
                <ul>
                    <li class="ll">商务合作</li>
                    <li>企业业务</li>
                    <li>开放平台</li>
                    <li>廉洁合规</li>
                    <li>媒体联络</li>
                </ul>
            </div>
            <div class="foot">
                <ul>
                    <li class="ll">服务与支持</li>
                    <li>联系我们</li>
                    <li>ColorOS</li>
                    <li>云服务</li>
                    <li>以旧换新</li>
                    <li>服务政策</li>
                    <li>预置软件公示</li>
                    <li>安全响应中心</li>
                </ul>
            </div>
        </div>
    </footer>
    <div class="fh" onclick="fhh()">↑</div>
</body>

</html>

<script>
    var flag = 0
    var time = 1
    var hh = document.querySelector('.hh')
    var ban = document.querySelector('.ban')
    var lis = document.querySelectorAll('.list ul li')
    var liss = document.querySelectorAll('.box .w .center ul li')
    var yy = document.querySelector('.box .w .top .p2 .yy')
    var zz = document.querySelector('.box .w .top .p2 .zz')
    var vv = document.querySelector('.box .w .center ul li .vv')
    var ii = document.querySelector('.box .w .center ul li .ii')
    var fh =document.querySelector('.fh')
    // var height=document.documentElement.clientHeight
    // console.log(height);

    setInterval(() => {
        time++
        for (var i = 0; i <= lis.length - 1; i++) {
            lis[i].style.backgroundColor = 'white'
        }
        lis[time - 1].style.backgroundColor = 'gray'
        if (time == 1) {
            ban.src = './imgs/1.jpg'
            hh.style.color = 'black'
        } else if (time == 2) {
            ban.src = './imgs/2.jpg'
            hh.style.color = 'white'
        } else {
            ban.src = './imgs/3.jpg'
            hh.style.color = 'gray'
            time = 0
        }
    }, 3000);

    function qh(index) {
        time = index
        lis.forEach(item => {
            item.style.backgroundColor = 'white'
        })
        lis[time].style.backgroundColor = 'gray'
        ban.src = `./imgs/${index + 1}.jpg`
        if (index == 0) {
            hh.style.color = 'black'
        } else if (index == 1) {
            hh.style.color = 'white'
        } else {
            hh.style.color = 'gray'
        }

    }

    function you() {
        flag++
        liss.forEach(item => item.style.display = 'none')
        if (flag == 1) {
            liss[1].style.display = 'block'
            liss[2].style.display = 'block'
            liss[3].style.display = 'block'
            yy.disabled = false
            zz.disabled = false
        }
        if (flag == 2) {
            liss[2].style.display = 'block'
            liss[3].style.display = 'block'
            liss[4].style.display = 'block'
            yy.disabled = false
            zz.disabled = false
        }
        if (flag == 3) {
            liss[3].style.display = 'block'
            liss[4].style.display = 'block'
            liss[5].style.display = 'block'
            yy.disabled = true
            zz.disabled = false
        }
    }

    function zuo() {
        flag--
        liss.forEach(item => item.style.display = 'none')
        if (flag == 0) {
            liss[0].style.display = 'block'
            liss[1].style.display = 'block'
            liss[2].style.display = 'block'
            zz.disabled = true
            yy.disabled = false
        }
        if (flag == 1) {
            liss[1].style.display = 'block'
            liss[2].style.display = 'block'
            liss[3].style.display = 'block'
            zz.disabled = false
            yy.disabled = false
        }
        if (flag == 2) {
            liss[2].style.display = 'block'
            liss[3].style.display = 'block'
            liss[4].style.display = 'block'
            zz.disabled = false
            yy.disabled = false
        }
        if (flag == 3) {
            liss[3].style.display = 'block'
            liss[4].style.display = 'block'
            liss[5].style.display = 'block'
            zz.disabled = false
            yy.disabled = false
        }
    }

    function ru() {
        ii.style.display = 'none'
        vv.style.display = 'block'
    }
    function chu() {
        vv.style.display = 'none'
        ii.style.display = 'block'
    }

    // window 游览器对象
    // 游览器滚动 onscroll 滚动事件
    window.onscroll=function(){
        // 获取到的是当前的根元素
        height =document.documentElement.scrollTop
       if(height <= 1200){
            fh.style.display = 'none'
       }else{
           fh.style.display='block'
       }
    }


    function fhh(){
        var a= setInterval(() => {
                var osTop =document.documentElement.scrollTop
                // console.log(osTop);
                var speed =Math.floor(osTop - 50)  
                console.log(speed);
                document.documentElement.scrollTop=speed
                // console.log( document.documentElement.scrollTop);
                if(osTop <= 0){
                    clearInterval(a)
                }
        }, 30);
    }




</script>